 
<div class="form-title">
  注册
</div>
<div class="form-body">
  <div class="form-tabsset">
    <div class="form-tabs"  (click)="changeTab(0);">
      <span class="form-tabs-title " [class.form-tabs-title-active]="nzSelectedIndex === 0">邮箱</span>
      <p *ngIf="nzSelectedIndex === 0" class="form-tabs-title-active-bottom"></p>
    </div>
    <div class="form-tabs"  (click)="changeTab(1);">
      <span class="form-tabs-title" [class.form-tabs-title-active]="nzSelectedIndex === 1">手机</span>
      <p *ngIf="nzSelectedIndex === 1" class="form-tabs-title-active-bottom"></p>
    </div>
  </div>
  <form nz-form class="form" [hidden]="nzSelectedIndex != 0" [formGroup]="emailForm">
    <nz-form-item>
      <nz-form-label style="margin-top: -0.1em !important" [nzSpan]="24" nzFor="email">
        <label for="">账号 *</label>
      </nz-form-label>
      <nz-form-control>
        <input nz-input placeholder="请输入账号" formControlName="email" name="email" (blur)='validatorEmailLoginId(emailForm)'>
        <nz-form-explain
          *ngIf="(emailForm.get('email').touched || emailForm.get('email').dirty) && emailForm.get('email').errors">
          <ng-container *ngIf="emailForm.get('email').errors.required">
            请输入账号
          </ng-container>
          <ng-container *ngIf="emailForm.get('email').errors.pattern">
            请输入正确账号
          </ng-container>
        </nz-form-explain>
        <nz-form-explain *ngIf="errorMsg">
            {{errorMsg}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
  <form nz-form class="form" [hidden]="nzSelectedIndex != 1" [formGroup]="phoneForm">
    <nz-form-item>
      <nz-form-label style="margin-top: -0.1em !important" [nzSpan]="24" nzFor="phone">
        <label for="">手机号码 *</label>
      </nz-form-label>
      <nz-form-control [nzSpan]="24" nzCompact>
        <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
          <ng-template #addOnBeforeTemplate>
            <nz-select formControlName="regionNumber" style="width: 70px;">>
              <nz-option *ngFor="let item of regionNumbers; let i = index" [nzLabel]="'+' + item.number"
                [nzValue]="item.number"></nz-option>
            </nz-select>
          </ng-template>
          <input nz-input placeholder="请输入账号" formControlName="phone" name="phone" maxlength="11" (blur)="validatorLoginId(phoneForm)">
        </nz-input-group>
        <nz-form-explain
          *ngIf="(phoneForm.get('phone').touched || phoneForm.get('phone').dirty ) && phoneForm.get('phone').errors ">
          <ng-container *ngIf="phoneForm.get('phone').errors.required">
            请输入手机号码
          </ng-container>
          <ng-container *ngIf="phoneForm.get('phone').errors.pattern">
            请输入正确手机号码
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
<div class="form-footer">
  <button *ngIf="nzSelectedIndex === 0" [disabled]="serviceError" nz-button nzType="primary"
    (click)="toNext(1)">下一步</button>
  <button *ngIf="nzSelectedIndex === 1" [disabled]="serviceError" nz-button
    nzType="primary" (click)="toNext(2)">下一步</button>
</div>